<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <van-nav-bar
        title="订单详情"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div v-if="orderDetails.orderLines == 0">
      <van-empty description="暂无详情" />
    </div>
    <div class="content">
      <!-- 订单的信息 -->
      <div class="order_info">
        <van-card
          v-for="item in orderDetails.orderLines"
          :key="item.id"
          :num="item.number"
          :price="item.price"
          desc="描述信息"
          :title="item.product.name"
          :thumb="item.product.photo"
        />
      </div>

      <!-- 详细信息 -->
      <div class="info">
        <van-card>
          <template #desc v-if="orderDetails.address">
            <div class="orderType">
              总价: <span style="color:red; font-size:15px">￥ {{ orderDetails.total }}</span>   
            </div>
            <div class="orderType">
              服务地址: {{ orderDetails.address.province }}
              {{ orderDetails.address.city }} {{ orderDetails.address.area }}
            </div>
            <div class="orderType">
              联系方式: {{ orderDetails.customer.telephone }}
            </div>
            <div class="orderType">
              下单时间: {{ orderDetails.orderTime | dateFormat }}
            </div>
            <div class="orderType">
              服务时间: {{ orderDetails.serviceTime | dateFormat }}
            </div>
          </template>
          <template #footer>
            <div>{{ orderDetails.status }}</div>
          </template>
        </van-card>
      </div>
    </div>
    <div class="confirm" v-if="orderDetails.status == '待确认'">
      <van-button
        style="width: 95%; font-weight: bold"
        color="linear-gradient(to right, #ff6034, #ee0a24)"
        type="primary"
        size="large"
        @click="onComfirm"
        >确认订单</van-button
      >
    </div>
    <div style="height: 100px"></div>
  </div>
</template>

<script>
import { get } from "@/http/axios";
export default {
  data() {
    return {
      orderDetails: {},
    };
  },
  created() {
    this.orderDetails = this.$route.query.details;
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    //确认订单
    async onComfirm() {
      let res = await get("/order/confirmOrder", {
        orderId: this.orderDetails.id,
      });
      if (res.data.status == 200) {
        this.$toast(res.data.message);
        this.$router.go(-1);
      }
    },
  },
};
</script>

<style>
.price {
  /* margin: 90px 10px; */
}
.orderType {
  margin: 10px 10px;
}
.confirm {
  margin-top: 10px;
  text-align: center;
}
.van-card {
  background: white;
}
.info > .van-card {
  background: #f2f3f5;
}
</style>